<template>
  <div class="live-section-create">
    <my-tabs :tab-list="tabList"></my-tabs>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="92px" size="mini">
      <el-form-item label="课时名称" prop="title">
        <el-input v-model="ruleForm.title" placeholder="请输入课时名称"></el-input>
      </el-form-item>
      <el-form-item label="开课日期" prop="date">
        <el-date-picker v-model="ruleForm.date" type="date" placeholder="开课日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="开课时间" prop="time">
        <el-time-picker
          is-range
          v-model="ruleForm.time"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          format="HH:mm"
        >
        </el-time-picker>
      </el-form-item>
      <el-form-item label="学时" prop="class_hour">
        <el-input-number v-model="ruleForm.class_hour" :step="1" :max="1000"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleSubmitForm('ruleForm')" size="mini" type="primary">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import MyTabs from '../../../../components/myTab.vue'
import { parseTime } from '@/utils/filters.js'
export default {
  components: {
    MyTabs
  },
  data() {
    return {
      value1: '',
      value2: '',
      tabList: [
        {
          title: '编辑课时'
        }
      ],
      rules: {
        title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        class_hour: [{ required: true, message: '请输入学时', trigger: 'blur' }],
        date: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        time: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ]
      },
      ruleForm: {
        title: '',
        date: '',
        time: '',
        class_hour: ''
      }
    }
  },
  methods: {
    switchTime(date, time) {
      let ndata = parseTime(date, '{y}-{m}-{d}')
      let stime = parseTime(time, '{h}:{i}')
      let stamp = new Date(ndata + ' ' + stime)
      return stamp / 1000
    },
    // 课时
    handleSubmitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$api.createTeacherCourseSectionData(
            this.$route.params.id,
            this.$route.query.id,
            {
              title: this.ruleForm.title,
              start_time: this.switchTime(this.ruleForm.date, this.ruleForm.time[0]),
              end_time: this.switchTime(this.ruleForm.date, this.ruleForm.time[1]),
              class_hour: this.ruleForm.class_hour
            },
            res => {
              this.$message.success(res.msg)
              this.$router.push({
                path: '/my/classes/teach/live/small/' + this.$route.params.id
              })
            },
            error => {
              this.$message.error(error.msg)
            }
          )
        }
      })
    }
  }
}
</script>

<style lang="scss">
.live-section-create {
  .el-form {
    .el-form-item {
      .el-input {
        width: 224px;
      }
      .el-input-number--mini {
        width: 160px;
      }
      .el-input-number .el-input {
        width: auto;
      }
      .el-form-item__label {
        font-size: 12px;
      }
    }
  }
}
</style>
